<script lang="ts" setup>
import { useTheme, type ThemeName } from '@/hooks/useTheme'
import { MagicStick } from '@element-plus/icons-vue'
import { ref } from 'vue'
import * as echarts from 'echarts'
const echartDoms = ref<any>([])
const echartInstance = []
const { themeList, activeThemeName, setTheme } = useTheme()
const handTheme = (title: ThemeName) => {
  setTheme(title)
  console.log('当前主题', activeThemeName.value)
  setChartTheme('')
}
//设置echart图表主题
const setChartTheme = (title: string) => {
  console.log('获取图表Dom', document.querySelectorAll('#main'))
  echartDoms.value = document.querySelectorAll('#main')
  echartDoms.value.forEach((item: HTMLBaseElement) => {
    var instance = echarts.getInstanceByDom(item)
    if (instance) {
      echartInstance.push(instance)
      // instance.setOption(backgroundColor:'black')
      // echarts.init(item, 'dark')
    }
  })
}
</script>

<template>
  <el-dropdown trigger="click">
    <span
      >主题<el-icon size="12" color="white"> <MagicStick /> </el-icon
    ></span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="item in themeList" @click="handTheme(item.name)">{{
          item.title
        }}</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>
